<template>
  <div class="home-page">
    <div class="container">
      <div class="header">
        <h1 class="title">🐚 扇贝背单词</h1>
        <p class="subtitle">输入您的 Token 开始背单词之旅</p>
      </div>

      <div class="token-form card">
        <div class="input-group">
          <label for="token">Auth Token</label>
          <input
            id="token"
            v-model="token"
            type="text"
            placeholder="请输入您的扇贝 Auth Token"
            @keyup.enter="saveToken"
          />
          <p class="help-text">
            Token 获取方法：打开<a href="https://web.shanbay.com/web/main" target="_blank"
              >扇贝官网</a
            >，按 F12 打开开发者工具，在 Application > Cookies 中找到 auth_token (内容开头为:ey....)
          </p>
        </div>

        <div class="button-group">
          <button class="btn btn-primary" @click="saveToken" :disabled="!token.trim()">
            保存 Token
          </button>
          <button v-if="savedToken" class="btn btn-secondary" @click="goToBooks">查看单词书</button>
        </div>

        <div v-if="message" class="message" :class="messageType">
          {{ message }}
        </div>
      </div>

      <div class="features">
        <div class="feature-card card">
          <div class="feature-icon">📚</div>
          <h3>单词书管理</h3>
          <p>查看和管理您的所有单词书</p>
        </div>
        <div class="feature-card card">
          <div class="feature-icon">⚡</div>
          <h3>快速学习</h3>
          <p>优化的学习流程，提高背词效率</p>
        </div>
        <div class="feature-card card">
          <div class="feature-icon">📊</div>
          <h3>学习进度</h3>
          <p>实时查看学习进度和完成情况</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import Cookies from 'js-cookie'

const router = useRouter()

const token = ref('')
const savedToken = ref('')
const message = ref('')
const messageType = ref<'success' | 'error' | ''>('')

onMounted(() => {
  // 检查是否已保存 token
  const existingToken = Cookies.get('auth_token')
  if (existingToken) {
    savedToken.value = existingToken
    token.value = existingToken
  }
})

const saveToken = () => {
  if (!token.value.trim()) {
    showMessage('请输入有效的 Token', 'error')
    return
  }

  try {
    // 保存到 Cookie，设置过期时间为 30 天
    Cookies.set('auth_token', token.value.trim(), { expires: 30 })
    savedToken.value = token.value.trim()
    showMessage('Token 保存成功！', 'success')
  } catch (error) {
    showMessage('Token 保存失败，请重试', 'error')
  }
}

const goToBooks = () => {
  router.push('/books')
}

const showMessage = (text: string, type: 'success' | 'error') => {
  message.value = text
  messageType.value = type
  setTimeout(() => {
    message.value = ''
    messageType.value = ''
  }, 3000)
}
</script>

<style scoped lang="scss">
.home-page {
  min-height: 100vh;
  padding: 40px 0;

  .header {
    text-align: center;
    margin-bottom: 40px;

    .title {
      font-size: 2.5rem;
      font-weight: 700;
      color: var(--primary-color);
      margin-bottom: 16px;
    }

    .subtitle {
      font-size: 1.1rem;
      color: var(--text-secondary);
    }
  }

  .token-form {
    max-width: 500px;
    margin: 0 auto 60px;

    .help-text {
      font-size: 12px;
      color: var(--text-secondary);
      margin-top: 8px;
      line-height: 1.4;
    }

    .button-group {
      display: flex;
      gap: 16px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .message {
      margin-top: 20px;
      padding: 12px 16px;
      border-radius: 8px;
      text-align: center;
      font-weight: 500;

      &.success {
        background: #e8f5e8;
        color: var(--primary-dark);
        border: 1px solid var(--primary-light);
      }

      &.error {
        background: #ffebee;
        color: #c62828;
        border: 1px solid #ffcdd2;
      }
    }
  }

  .features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;

    .feature-card {
      text-align: center;

      .feature-icon {
        font-size: 3rem;
        margin-bottom: 16px;
      }

      h3 {
        color: var(--primary-color);
        margin-bottom: 12px;
        font-size: 1.2rem;
      }

      p {
        color: var(--text-secondary);
        line-height: 1.5;
      }
    }
  }
}

@media (max-width: 768px) {
  .home-page {
    padding: 20px 0;

    .header .title {
      font-size: 2rem;
    }

    .features {
      grid-template-columns: 1fr;
    }
  }
}
</style>
